<template>
    <echart :options="option" class="echarts"></echart>
</template>

<style scoped>
.echarts {
  height: 130%;
  width: 100%;
  border-radius: 25px;
}
</style>

<script>
var targetCoord = [1000, 300];//CIOS位置
var curveness = 0.2;//线弧度
var linesData = [];
var categories = [
  {
    name: "流入中",
    itemStyle: {
      normal: {
        color: "#01acca"
      }
    },
    label: {
      normal: {
        fontSize: "4"
      }
    }
  },
  {
    name: "暂无流入",
    itemStyle: {
      normal: {
        color: "#ffb402"
      }
    },
    label: {
      normal: {
        fontSize: "4"
      }
    }
  }
];

var item = {
  name: "CIOS",
  value: targetCoord,
  symbolSize: 100,//CIOS球大小
  itemStyle: {
    normal: {
      color: "#157eff"
    }
  },
  label: {
    normal: {
      fontSize: "14"
    }
  }
};

var items = [
  {
    name: "EMSC",
    category: 0,// 0未流入，1流入
    active: true,//true连接线上运动，无/false不运动
    speed: " ",//连接线上的内容
    value: [0, 0]
  },
  {
    name: "FAS",
    category: 0,
    active: true,
    speed: " ",
    value: [0, 100]
  },
  {
    name: "PACADA",
    category: 0,
    active: true,
    speed: " ",
    value: [0, 200]
  },
  {
    name: "CCTV",
    category: 0,
    active: true,
    speed: " ",
    value: [0, 300]
  },
  {
    name: "PA",
    category: 0,
    active: true,
    speed: " ",
    value: [0, 400]
  },
  {
    name: "ATS",
    category: 1,
    value: [0, 500]
  }
];

var data = items.concat([item]);

items.forEach(function(el) {
  if (el.active) {
    linesData.push([
      {
        coord: el.value
      },
      {
        coord: targetCoord
      }
    ]);
  }
});

var links = items.map(el => {
  return {
    source: el.name,
    target: item.name,
    speed: el.speed,
    lineStyle: {
      normal: {
        color: el.speed ? "#12b5d0" : "#ff0000",
        curveness: curveness
      }
    }
  };
});
export default {
  data: function() {
    return {
      option: {
        title: {
          text: "接口状态                           ",
          left: "5%",
          top: "5%",
          textStyle: {
              color: "#eedfbe",
            },
          backgroundColor: "#0a3c60"
        },
        backgroundColor: "#0D2A42",
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "18%",
          containLabel: true
        },
        legend: [
          {
            top: "13%",
            tooltip: {
              show: true
            },
            textStyle: {
              color: "#FFF"
            },
            selectedMode: false,
            right: 0,
            data: categories.map(function(el) {
              return el.name;
            })
          }
        ],
        xAxis: {
          show: false,
          type: "value"
        },
        yAxis: {
            inverse: true,
          show: false,
          type: "value"
        },
        series: [
          {
            type: "graph",
            layout: "none",
            coordinateSystem: "cartesian2d",
            symbolSize: 40,
            z: 3,
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 14
                },
                formatter: function(params) {
                  let txt = "";
                  if (params.data.speed !== undefined) {
                    txt = params.data.speed;
                  }
                  return txt;
                }
              }
            },
            label: {
              normal: {
                show: true,
                position: "bottom",
                color: "#fff"
              }
            },
            itemStyle: {
              normal: {
                shadowColor: "none"
              },
              emphasis: {}
            },
            lineStyle: {
              normal: {
                width: 2,
                shadowColor: "none"
              }
            },
            edgeSymbol: ["none", "arrow"],
            edgeSymbolSize: 8,
            data: data,
            links: links,
            categories: categories
          },
          {
            name: "A",
            type: "lines",
            coordinateSystem: "cartesian2d",
            z: 1,
            effect: {
              show: true,
              smooth: false,
              trailLength: 0,
              symbol: "arrow",
              color: "rgba(55,155,255,0.5)",
              symbolSize: 12
            },
            lineStyle: {
              normal: {
                curveness: curveness
              }
            },
            data: linesData
          }
        ]
      }
    };
  }
};
</script>
